<template>
	<view class="jp-flex-column">
		<view class="image-container" :style="[imageContainer]">
			<image class="image-large" :src="originalImage" :style="[imageLarge]" mode="scaleToFill"
				@click="$u.throttle(getCaptcha, 500)"></image>
			<image class="image-small" :style="[imageSmall]" :src="templateImage" mode="scaleToFill"
				@click="$u.throttle(getCaptcha, 500)"></image>
		</view>
		<jp-slider v-if="imageSmall.width" ref="sliderVerification" :max="w" :ignoreBoxW="false" containerH="64rpx"
			:boxW="imageSmall.width" :sliderBoxCustomStyle="sliderBoxCustomStyle" @changing="onChanging"
			@change="finish">
			<template #sliderBoxContent>
				<u-icon name="arrow-right-double" color="var(--uni-color-primary)" bold size="44rpx"></u-icon>
			</template>
			<template #rightBgContent>
				<text v-if="clientX<(w/10.0)">滑动验证</text>
			</template>
		</jp-slider>
	</view>
</template>

<script>
	import props from "./props/props.js"

	export default {
		name: "verify-slider",
		mixins: [props],
		data() {
			return {
				w: 300, //大图宽度，单位px
				h: 150, //大图高度，单位px
				smallSize: 41, //小图宽或者高，单位px，小图为正方形
				smallOffsetY: 0, //小图top值，单位px;
				originalImage: '',
				templateImage: '',
				verifyCount: 0, //连续验证errorCountReset次后刷新图片
				clientX: 0,

				parameter: {
					type: 'verify-slider',
					code: '',
					uuid: ''
				},

				sliderBoxCustomStyle: {
					borderRadius: '8rpx',
					backgroundColor: '#FFF'
				},
				containerW: 0,
				imageSmall: {
					height: 0 + 'px',
					top: 0 + 'px',
					left: 0 + 'px'
				},
				imageLarge: { //图片不显示设置一下宽度或者高度只设置top:0,bottom:0,left=0,right=0,图片无法自适应image容器
					height: 0 + 'px'
				},
				imageContainer: {
					height: 0 + 'px',
				}
			}
		},
		mounted() {
			this.resetClienRect()
		},
		methods: {
			resetClienRect() {
				this.$nextTick(() => {
					let query = uni.createSelectorQuery().in(this)
					query.select('.image-container').boundingClientRect().exec(res => {
						let containerW = res[0].width
						let containerH = (this.h / this.w) * containerW
						this.imageContainer.height = containerH + 'px'
						this.imageLarge.width = containerW + 'px'
						this.imageLarge.height = this.imageContainer.height
						this.imageSmall.width = (containerH / this.h) * this.smallSize + 'px'
						this.imageSmall.height = this.imageSmall.width
						this.imageSmall.top = (containerH / this.h) * this.smallOffsetY + 'px'
					})
				})
			},
			init() {
				this.parameter.code = ''
				this.parameter.uuid = ''
				this.getCaptcha()
			},
			async getCaptcha() {
				if (this.getGraphicCaptcha && typeof(this.getGraphicCaptcha) === 'function') {
					var res = await this.getGraphicCaptcha.call(uni.$u.$parent.call(this))
					// {
					// 	"code":200,
					// 	"data":{
					// 		"originalImage":"",
					// 		"templateImage":"",
					// 		"yHeight":0,
					// 		"width":300,
					// 		"height":150,
					// 		"templateWidth":41,
					// 		"uuid":""
					// 	}
					// }
					if (res.code == 0 || res.code == 200) {
						this.verifyCount = 0
						if (res.data) {
							if (res.data.originalImage.startsWith('data:image')) {
								this.originalImage = res.data.originalImage
							} else {
								this.originalImage = 'data:image/png;base64,' + res.data.originalImage
							}
							if (res.data.templateImage) {
								if (res.data.templateImage.startsWith('data:image')) {
									this.templateImage = res.data.templateImage
								} else {
									this.templateImage = 'data:image/png;base64,' + res.data.templateImage
								}
							}
							this.smallOffsetY = res.data.yHeight || 0
							this.w = res.data.width || 300
							this.h = res.data.height || 150
							this.smallSize = res.data.templateWidth || 41
							this.parameter.uuid = res.data.uuid
						}
					}
					this.resetClienRect()
				} else {
					uni.showToast({
						icon: 'none',
						title: '父组件请实现 getGraphicCaptcha 方法，以获取图形验证码信息'
					})
				}
			},
			onChanging(clientX, currentValue) {
				this.clientX = clientX
				this.imageSmall.left = clientX + 'px'
			},
			async finish(currentValue) {
				this.parameter.code = currentValue
				if (this.validator && typeof(this.validator) === 'function') {
					console.log('【jp-graphic-verification】validator=>' + JSON.stringify(this.parameter))
					var flag = await this.validator.call(uni.$u.$parent.call(this), this.parameter)
					if (flag == true) {
						this.$refs.sliderVerification.resultHandle('检验成功').then(res => {
							this.$emit('finish', this.parameter)
						})
					} else {
						this.$refs.sliderVerification.resultHandle(null, '检验失败').then(res => {
							if (++this.verifyCount >= this.errorCountReset) {
								this.init()
							}
						})
					}
				} else {
					console.warn('【jp-graphic-verification】validator 属性未定义,无法时时完成校验')
					this.$emit('finish', this.parameter)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.image-container {
		position: relative;
		margin: 30rpx 0 32rpx 0;
		border-radius: 4rpx;
		overflow: hidden;
		width: 100%;


		.image-large {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10;
			background-color: #00000020;
		}

		.image-small {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 20;
		}
	}
</style>